<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css"
          href="bootstrap/bootstrap.4.1.0.css">
    <script src="./bootstrap/jquery.3.2.1.min.js"></script>
    <script src="./bootstrap/popper.12.5.min.js"></script>
    <script src="./bootstrap/bootstrap.4.1.0.min.js"></script>
    <script src="./layui/layer/layer.js"></script>
    <script src="./vue/Vue.js"></script>
    <script src="./vue/axios.js"></script>
</head>
<body>
    <div id="app">
        <br>
        车型：<input type="text" v-model="carType" >
        <br>
        <br>
        图号：<input type="text" v-model="mapNum" >
        <br>
        <br>
        种类：<select  v-model="selectType">
                <option v-for="type in types" :value="type.id">{{type.name}}</option>
            </select>
        <br>
        <br>
        名称：<input type="text" v-model="name" >
        <br>
        <br>
        价格：<input type="number" v-model="price">
        <br>
        <br>
        产地：<input type="text" v-model="factory" >
        <br>
        <br>
        备注：<input type="text" v-model="mark">
        <br>
        <br>
        <div>
            <input type="button" value="添加" @click = "addPro()"  class="btn-default" style="display: block;margin: 0 auto">
        </div>
    </div>
</body>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            carType: "",
            mapNum: "",
            name: "",
            price: null,
            factory: "",
            mark: "",
            types:[],
            selectType: null
        },
        mounted:function() {
            axios.post(
                "/product/type/list"
            ).then(
                res => {
                    if(res.data.code===200){
                        this.types = res.data.returnData;
                    }else if(res.data.code===500){
                        layer.msg(res.data.message);
                    }
                }

            ).catch(response => {
                layer.alert("服务器忙，请稍后再试")
                console.log(response)
            })
        },
        methods: {
            initDefaultData:function() {
                this.carType = "";
                this.mapNum = "";
                this.name = "";
                this.price = null;
                this.factory = "";
                this.mark = "";
                this.selectType = null;
            },
            addPro: function () {
                if (this.hasInvalidParam()) {
                    return;
                }
                let pro = {
                    carType: this.carType,
                    mapNum: this.mapNum,
                    name: this.name,
                    price: this.price,
                    factory: this.factory,
                    mark: this.mark,
                    typeId:this.selectType
                }

                axios.post(
                    "/product/oprPro",
                    pro
                ).then(
                    res => {
                        if(res.data.code===200){
                            this.initDefaultData();
                            layer.alert("新增成功", {
                                skin: 'layui-layer-molv',
                                closeBtn: 0,
                                anim: 1,
                                btn: ['好的', '继续新增'],
                                icon: 6,
                                yes :function () {
                                    parent.window.location.href = "index.html";
                                    parent.layer.closeAll();
                                }
                            })

                        }else if(res.data.code===500){
                            layer.msg(res.data.message);
                        }
                    }

                ).catch(response => {
                    layer.alert("服务器忙，请稍后再试")
                    console.log(response)
                })
            },
            hasInvalidParam: function () {
                if (this.name === "") {
                    layer.alert("名称不能为空")
                    return true;
                }

                if (this.price < 0) {
                    layer.alert("价格错误")
                    return true;
                }
                return false;
            }
        }

    })
</script>
</html>